<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    body,
    p {
      padding: 0;
      margin: 0;
    }
    .position {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
    }
    ul {
      list-style: none;
    }
    .accordion-container {
      display: flex;
      width: 300px;
      flex-direction: column;
    }
    .accordion-container .accordion-item {
      flex: 1;
    }
    .accordion-container .accordion-item:nth-of-type(n) {
      background: greenyellow;
    }
    .accordion-container .accordion-item:nth-of-type(2n) {
      background: skyblue;
    }
    .accordion-container .accordion-item .accordion-item-content {
      background: tomato;
      height: 0;
      overflow: hidden;
      transition: height 0.5s;
    }
    /* .accordion-container .accordion-item:hover .accordion-item-content {
      height: 200px;
    } */
  </style>
  <body>
    <div class="position">
      <ul class="accordion-container">
        <li class="accordion-item">
          我是li1
          <div class="accordion-item-content">
            <p>我是li1</p>
            <p>我是li1</p>
            <p>我是li1</p>
            <p>我是li1</p>
            <p>我是li1</p>
            <p>我是li1</p>
          </div>
        </li>
        <li class="accordion-item">
          我是li2
          <div class="accordion-item-content">
            <p>我是li2</p>
            <p>我是li2</p>
            <p>我是li2</p>
            <p>我是li2</p>
          </div>
        </li>
        <li class="accordion-item">
          我是li3
          <div class="accordion-item-content">
            <p>我是li3</p>
            <p>我是li3</p>
            <p>我是li3</p>
            <p>我是li3</p>
            <p>我是li3</p>
            <p>我是li3</p>
            <p>我是li3</p>
            <p>我是li3</p>
          </div>
        </li>
        <li class="accordion-item">
          我是li4
          <div class="accordion-item-content">
            <p>我是li4</p>
            <p>我是li4</p>
          </div>
        </li>
        <li class="accordion-item">
          我是li5
          <div class="accordion-item-content">
            <p>我是li5</p>
            <p>我是li5</p>
            <p>我是li5</p>
            <p>我是li5</p>
          </div>
        </li>
      </ul>
    </div>

    <script>
      let ul = document.querySelector(".accordion-container");
      ul.addEventListener("click", function(e) {
        let target = e.target;
        if (target.nodeName.toLocaleLowerCase() == "li") {
          let parent = target.querySelector(".accordion-item-content");
          let childs = parent.querySelectorAll("p");
          let height = 0;
          childs.forEach(ele => {
            height += ele.offsetHeight;
          });

          target.parentElement.querySelectorAll(".accordion-item").forEach(element => {
              element.querySelector(".accordion-item-content").style.height = 0;
            });
          parent.style.height = height + "px";
        }
      });
    </script>
  </body>
</html>
